Angular 自定义属性指令

2023-11-11 15:19| 来源: 网络整理| 查看: 265

本文将使用 UltimateAngular/angular-pro-src 中的示例，来一步步介绍自定义属性指令的相关知识。在正式开发前，我们可以先看一下，最终效果 Stackblitz - Custom-Attribute-Directive。

该示例中定义了两个自定义指令：

CreditCardDirective —— 信用卡指令，用于对输入的 16 位信用卡号码，格式化显示（每 4 位数字为一组，中间用空格符分隔）。TooltipDirective —— Tooltip 指令，用于显示提示消息。

现在我们先来定义 CreditCardDirective：

import { Directive, ElementRef } from '@angular/core'; @Directive({ selector: '[credit-card]' }) export class CreditCardDirective { constructor(private element: ElementRef) { console.log(this.element); } }

定义完 CreditCardDirective 指令，我们需要在 AppModule 模块中声明该指令：

@NgModule({ declarations: [ AppComponent, CreditCardDirective, ], }) export class AppModule {}

此后，我们就可以在模板中应用该指令了：

Credit Card Number

接下来我们来分析一下需求，对输入的数字格式化显示，即每 4 位数字为一组，中间用空格符分隔。要实现该需求，前提是我们能监听输入框的 input 事件，然后获取该输入框的值，在对输入的数字进行格式化处理。想要监听宿主元素的 input 事件，我们可以利用 Angular 提供的 HostListener 装饰器。

HostListener

HostListener 是属性装饰器，一般用来为宿主元素添加事件监听。它的定义如下：

export interface HostListenerDecorator { (eventName: string, args?: string[]): any; new (eventName: string, args?: string[]): any; }

通过以上定义可知 HostListenerDecorator 支持两个参数：eventName 和 args。其中 eventName 用于表示事件名称，而 args 用于表示参数列表。

下面我们来看一下如何使用 HostListenerDecorator ：

@Directive({ selector: '[credit-card]' }) export class CreditCardDirective { @HostListener('input', ['$event']) onKeyDown(event: KeyboardEvent) { const input = event.target as HTMLInputElement; //... } }

需要注意的是，参数列表中 $event 这个参数，它是一个特殊的 token，用于表示事件对象。如果使用其它的名称，比如 event 的话，我们就不能正确获取事件对象。此外，除了监听宿主元素外，我们也可以监听 window 或 document 对象上的事件，如 @HostListener('document:click', ['$event']) 。

接下来我们来实现格式化显示的功能：

const input = event.target as HTMLInputElement; let trimmed = input.value.replace(/\s+/g, ''); if (trimmed.length > 16) { trimmed = trimmed.substr(0, 16); } let numbers = []; for (let i = 0; i < trimmed.length; i += 4) { numbers.push(trimmed.substr(i, 4)); } input.value = numbers.join(' ');

以上代码很简单，相信大家都能看懂。这里有个问题，当用户在输入框输入非数值类型的时候，我们希望能提醒用户。最简单的方式，就是给当前输入框设置一个红色的边框。要实现这个功能，我们可以利用 HostBinding 装饰器。

HostBinding

HostBinding 是属性装饰器，用来动态设置宿主元素的属性值。它的定义如下：

export interface HostBindingDecorator { (hostPropertyName?: string): any; new (hostPropertyName?: string): any; }

对于上述的功能，我们先要为 CreditCardDirective 指令类新增一个 border 属性，然后使用 HostBinding 装饰器，具体如下：

@HostBinding('style.border') border: string;

在设置完属性绑定后，我们来更新一下 onKeyDown() 方法中的代码，当发现输入非数值时，为当前的输入框设置一个红色的边框：

this.border = ''; if (/[^\d]+/.test(trimmed)) { this.border = '1px solid red'; }

此时，CreditCardDirective 指令的功能已基本完成，下面是完整的实现：

import { Directive, HostListener, HostBinding, ElementRef } from '@angular/core'; @Directive({ selector: '[credit-card]' }) export class CreditCardDirective { @HostBinding('style.border') border: string; @HostListener('input', ['$event']) onKeyDown(event: KeyboardEvent) { const input = event.target as HTMLInputElement; let trimmed = input.value.replace(/\s+/g, ''); if (trimmed.length > 16) { trimmed = trimmed.substr(0, 16); } let numbers = []; for (let i = 0; i < trimmed.length; i += 4) { numbers.push(trimmed.substr(i, 4)); } input.value = numbers.join(' '); this.border = ''; if (/[^\d]+/.test(trimmed)) { this.border = '1px solid red'; } } }

好的，我们趁热打铁，接着开发 TooltipDirective 指令。该指令实现的功能是，当鼠标移入到指定的元素时（页面中的 ? 元素），显示我们自定义的提示消息。而当鼠标移出指定元素时，要隐藏我们自定义的提示消息。

要实现该功能的一种实现方案是，为应用 TooltipDirective 指令的宿主元素动态添加一个子元素，然后让它作为提示消息的容器，当鼠标移入到指定的元素时，显示前面动态添加的元素。

下面我们来定义 TooltipDirective 指令：

import { Input, Directive, ElementRef, OnInit } from '@angular/core'; @Directive({ selector: '[tooltip]' }) export class TooltipDirective implements OnInit { constructor( private element: ElementRef ) {} }

接着我们按照上述的方案，更新一下 TooltipDirective 指令：

import { Input, Directive, ElementRef, OnInit } from '@angular/core'; @Directive({ selector: '[tooltip]' }) export class TooltipDirective implements OnInit { tooltipElement = document.createElement('div'); @Input() set tooltip(value) { this.tooltipElement.textContent = value; } constructor( private element: ElementRef ) {} ngOnInit() { this.tooltipElement.className = 'tooltip'; this.element.nativeElement.appendChild(this.tooltipElement); this.element.nativeElement.classList.add('tooltip-container'); } }

在上面代码中，我们定义了一个输入属性，用于接收用户自定义的提示消息，之后通过调用 DOM API 创建了一个 div 元素，然后在 ngOnInit 生命周期钩子中，执行相关的初始化操作。下面我们再来为该指令新增两个方法，用于控制新建的 div 元素的显示和隐藏：

hide() { this.tooltipElement.classList.remove('tooltip--active'); } show() { this.tooltipElement.classList.add('tooltip--active'); }

此时我们的指令功能已基本实现，我们来看一下如何使用：

Enter your security code (?)

以上代码正常运行后，利用开发者工具，我们能够看到手动创建的 tooltip 元素。我们的目标是，鼠标移入 (?) 元素时，显示提示消息，而鼠标移出 (?) 元素时，隐藏提示消息。要实现这个功能，我们可以监听 span 元素的 mouseover 和 mouseout 事件，在对应的回调函数中，控制 tooltip 元素的显示和隐藏。

此时，我们的 TooltipDirective 指令，已经包含了控制 tooltip 元素显示和隐藏的方法。那么现在的问题是，我们要如何访问 TooltipDirective 指令的实例。针对这个问题，我们可以在定义指令时，设置 exportAs 属性：

@Directive({ selector: '[tooltip]', exportAs: 'tooltip' })

之后，我们就可以在模板中，引用该指令对象，具体如下：

Enter your security code (?)

至此，我们的所有功能就开发完了，以下是 TooltipDirective 指令的完整实现：

import { Input, Directive, ElementRef, OnInit } from '@angular/core'; @Directive({ selector: '[tooltip]', exportAs: 'tooltip' }) export class TooltipDirective implements OnInit { tooltipElement = document.createElement('div'); @Input() set tooltip(value) { this.tooltipElement.textContent = value; } hide() { this.tooltipElement.classList.remove('tooltip--active'); } show() { this.tooltipElement.classList.add('tooltip--active'); } constructor( private element: ElementRef ) {} ngOnInit() { this.tooltipElement.className = 'tooltip'; this.element.nativeElement.appendChild(this.tooltipElement); this.element.nativeElement.classList.add('tooltip-container'); } }

事实上在 Angular 表单模块中，也大量使用了 exportAs 属性，比如 ngModel、ngForm、ngModelGroup 及 formControl 指令等。本文通过 CreditCardDirective 和 TooltipDirective 两个指令，介绍了 Angular 自定义属性指令所涉及的相关的基础知识，若想继续深入学习的话，可以阅读 Angular 的官方文档或参考 Github 相关的开源项目。

【本文地址】

公司简介

联系我们